<template>
  <div :class="['videoCover', type]">
    <div class="avatarBox">
      <avatar :id="id" :imgID="current_user.user_img_id" :radius="true"></avatar>
    </div>
  </div>
</template>

<script>
export default {
  name: 'videoCover',
  props: {
    id: {
      type: Number
    },
    type: {
      type: String
    }
  },
  computed: {
    current_user () {
      if (this.$store.state.chatInformation.userList[this.id]) {
        return this.$store.state.chatInformation.userList[this.id]
      } else {
        return {}
      }
    }
  }
}
</script>

<style scoped lang="scss">
.videoCover {
  width: 100%;
  height: 100%;
  position: relative;

  .avatarBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.big {
  background: linear-gradient(180deg,#1d2958 0%, #1b172b 77%);

  .avatarBox {
    width: 96px;
    height: 96px;
  }
}
.small {
  background-color: #000;

  .avatarBox {
    width: 64px;
    height: 64px;
  }
}
</style>
